// Spacing
base = 16px

// Colors
color-black = #111111
color-gray = #A7A7A7
color-white = #F5F5F5
color-blue = #0062FF
color-red = #ff1500
color-yellow = #ffbf00
color-green = #00b30f

// Fonts
font = -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif

// Typography Scale
// let s = size, b = base (1rem), r = ratio, and l = level -> s = b * (r ^ l)
typography-size-base = base

typography-size-ratio = 1.15
typography-size-1 = round(typography-size-base * (typography-size-ratio ** 6), 3)
typography-size-2 = round(typography-size-base * (typography-size-ratio ** 5), 3)
typography-size-3 = round(typography-size-base * (typography-size-ratio ** 4), 3)
typography-size-4 = round(typography-size-base * (typography-size-ratio ** 3), 3)
typography-size-5 = round(typography-size-base * (typography-size-ratio ** 2), 3)
typography-size-6 = round(typography-size-base * typography-size-ratio, 3)

typography-size-small-ratio = 1.13
typography-size-small-1 = round(typography-size-base * (typography-size-small-ratio ** 6), 3)
typography-size-small-2 = round(typography-size-base * (typography-size-small-ratio ** 5), 3)
typography-size-small-3 = round(typography-size-base * (typography-size-small-ratio ** 4), 3)
typography-size-small-4 = round(typography-size-base * (typography-size-small-ratio ** 3), 3)
typography-size-small-5 = round(typography-size-base * (typography-size-small-ratio ** 2), 3)
typography-size-small-6 = round(typography-size-base * typography-size-small-ratio, 3)

// Grid
columns = 12

// Transition
transition = all .2s ease

// Border
border(color)
  border: 1px solid color

border-radius()
  border-radius: 2px

border-round(color)
  border(color)
  border-radius()
